<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>

<body>
    <div class="nav">
        黑白浮生
    </div>
    <div class="container">
        <div>
            <div id="trail-container"></div>
            <!-- 显示用户信息 -->
            <div id="screen"></div>
            <div id="match-button">开始匹配</div>
        </div>
    </div>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/common.js"></script>
    <script>

        $.ajax({
            type: "get",
            url: "/userInfo",
            success: function (body) {
                let screenDiv = document.querySelector("#screen");
                screenDiv.innerHTML = "玩家：" + body.username + " 积分：" + body.score
                    + "</br>" + "总场数：" + body.totalCount + " 获胜场数：" + body.winCount;
            },
            error: function () {
                alert("获取用户信息失败！")
            }
        });

        // 进行初始化 websocket，并且实现前端的匹配逻辑
        let websocketUrl = 'ws://' + location.host + '/findMatch';
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function () {
            console.log("onopen");
        }
        websocket.close = function () {
            console.log("onclose");
        }
        websocket.onerror = function () {
            console.log("onerror");
        }
        // 监听页面关闭事件，在页面关闭之前，手动调用这里的 websocket 的 close 方法。
        window.onbeforeunload = function () {
            websocket.close();
        }

        websocket.onmessage = function (e) {
            // 处理服务器返回的相应数据，"开始匹配" / "停止匹配"
            // 将返回的 JSON 字符串 解析成 js
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector("#match-button");
            if (!resp.ok) {
                console.log("游戏大厅中接收到了失败响应：" + resp.reason);
                return;
            }
            if (resp.message == 'startMatch') {
                // 开始匹配
                console.log("进入匹配队列成功！");
                matchButton.innerHTML = "匹配中...(点击停止)";

            } else if (resp.message == 'stopMatch') {
                // 停止匹配
                console.log("停止匹配成功！");
                matchButton.innerHTML = "开始匹配";
            } else if (resp.message == 'matchSuccess') {
                // 匹配到对手了
                console.log("匹配到对手！进入游戏房间！");
                location.replace("/game_room.html")
            } else if (resp.message == 'repeatConnection') {
                alert("当前检测到多开，请使用其他账号登录！");
                location.replace("/login.html");
            } else {
                console.log("收到了非法的响应！message = " + resp.message);

            }
        }

        // 给匹配按钮添加一个点击事件
        let matchButton = document.querySelector("#match-button");
        matchButton.onclick = function () {
            // 在触发 websocket 请求之前，先确认下 websocket 连接是否正常
            if (websocket.readyState == websocket.OPEN) {
                // 连接正常
                // 这里发送的数据有两种可能，开始匹配/停止匹配
                if (matchButton.innerHTML == '开始匹配') {
                    console.log("开始匹配");
                    websocket.send(JSON.stringify({
                        message: "startMatch",
                    }));
                } else if (matchButton.innerHTML == '匹配中...(点击停止)') {
                    console.log("停止匹配");
                    websocket.send(JSON.stringify({
                        message: "stopMatch",
                    }));
                }
            } else {
                alert("当前您的连接已经断开，请重新登录！");
                location.replace("/login.html");
            }
        }
    </script>
</body>

</html>